<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-form">
        <el-form ref="formRef" :model="data.form" :rules="data.rules" style="width:250px">
          <div style="margin-bottom: 20px; text-align:  center; font-size: 24px; color: #181818; font-weight: bold">欢 迎 注 测</div>
          <el-form-item prop="username">
            <el-input v-model="data.form.username" placeholder="请输入账号" prefix-icon="User">
            </el-input>
          </el-form-item>
          <el-form-item prop="no">
            <el-input v-model="data.form.no" placeholder="请确认工号" prefix-icon="User">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="data.form.password" placeholder="请输入密码" prefix-icon="Lock" show-password>
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input v-model="data.form.confirmPassword" placeholder="请确认密码" prefix-icon="Lock" show-password>
            </el-input>
          </el-form-item>
          <div>
            <el-button size="large" type="primary" style="width: 100%; height: 33px;" @click="register">注册</el-button>
          </div>
          <div style="margin-top: 10px; text-align: right">
            注册完毕？请  <a style="color: #409eff; text-decoration: none" href="/register">登录</a>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script setup>

import {reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请确认密码'))
  }  else if (value !== data.form.confirmPassword) {
    callback(new Error("密码不一致"))
  } else {
    callback()
  }
}

const data = reactive({
    form: {},
    rules: {
      username: [
        { required: true, message: '请输入账号', trigger: 'blur'},
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
      confirmPassword: [
        { validator: validatePass, trigger: 'blur'}
      ],
      no: [
        { required: true, message: '请输入工号', trigger: 'blur' },
      ]
    }
})

const formRef = ref()




const register = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post('/register', data.form).then(res =>{
        if(res.code === '200'){
          ElMessage.success('注册成功');
          location.href = '/login'
        }else {
          ElMessage.error(res.msg);
        }
      })
    }
  })
}

</script>

<style>

.login-container{
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/bg.png");
  background-size: cover;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
}

.login-form{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  padding-bottom: 10px;
}

.login-box {
  width: 400px;
  padding: 30px;
  background-color: rgba(245, 240, 230, 0.85); /* 水墨风背景色（类似宣纸） */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* 淡淡阴影，增强层次感 */
  border: 1px solid #dcdcdc; /* 可选：添加边框，更贴近传统水墨画的边界感 */
}

</style>